<!--  -->
<template>
  <div :class="className">
    <div v-html="css"></div>
    <div class="courseList" >
      <div class="title flex-a-c flex-j-sb">
        <h3>{{datas.title}}</h3>
        <div class="flex-a-c courseAll" @click="courseAll">
          <span>{{datas.small_title}}</span>
          <span class="iconfont icon-advertise-next"></span>
        </div>
      </div>
      <div v-if="courseList.length > 0">
        <block v-for="(item,index) in courseList" :key="index">
          <courseItem :datas="item" :style="{borderRadius: '8px'}" :courseType="2">
            <template slot="chapterLeft">
              <div class="flex-a-c chapter flex-j-sb" >
                <div class="chapter-left flex-a-c">
                  <img class="chapter-img" :src="item.lecturer_img" />
                  <span>{{item.lecturer_name}}</span>
                </div>
                <div class="chapter-right">{{item.chapter_count}}章{{item.section_count}}节</div>
              </div>
            </template>
          </courseItem>
        </block>
      </div>
      <van-empty description="暂无数据" v-else/>
      <div class="loadMore" v-if="isLoadMore" @click="getMoreData">加载更多</div>
      <div class="loadMore" v-if="isLoadMoreSet" @click="getMoreDataAll">加载更多</div>
      <div class="loadMore" v-if="lastIndex == index && (page >= total_page)">{{ $i18n.t("没有更多了") }}~~</div>
    </div>
  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';
import courseItem from "./courseItem.vue";
// 自定义样式
const css = function() {
  if (this.datas.preview_color) {
    // 确保数据已传入
    let datas = this.plugin_active && this.openTemplate == 1 ? this.datas_style02 : this.datas;
    const { preview_color, small_title_color, title_color } = datas;

    return `
        .component-${this.id} .courseList {
            background: ${preview_color};
        }
        .component-${this.id} .title h3{
            color:${title_color}
        }
        .component-${this.id} .title .courseAll{
            color:${small_title_color}
        }
    `;
  }
};
export default {
name:'',
//import引入的组件需要注入到对象中才能使用
components: {
  courseItem
},
props: ["id","page_id", "datas","lastIndex","index","component_key","isBottom", "tabcontrol", "isLast","tabIndex"],
data() {
  return {
    arrIndex: 1, //组件加载下一页
    per_page:5, //每页多少条数据
    page:1,
    isLoadMore: true,
    isLoadMoreSet:false,
    allLoaded: false, //全部数据加载完成
    total_page:0,
    // courseList: [], //商品加载
    courseUnList:[],
    courseListData:[], //总数据处理
  };
},
//监听属性 类似于data概念
computed: {
  css() {
      return "<style>" + css.call(this) + "</style>";
  },
  className() {
    const name = ["component-wrapper", `component-${this.id}`];
    return name;
  },
  courseList() {
    return this.datas.list.data || this.datas.list;
  }
},
//监控data中的数据变化
watch: {
  isBottom: function(newVal, oldVal) {
      if (this.tabcontrol) {
        // 选项卡this.isLast判断商品列表是最后一个组件
        if (newVal && this.isLast && this.isLoadMore) {
          this.getMoreData();
        } else if (this.page >= this.total_page) {
          this.getMoreDataAll();
        }
      }
      // this.lastIndex == this.index判断商品列表是最后一个组件
      if (newVal && this.lastIndex == this.index && this.isLoadMore) {
        this.getMoreData();
      } else if (this.page >= this.total_page) {
        this.getMoreDataAll();
      }
    }
},
//方法集合
methods: {
  courseAll() {
    this.$router.push(this.fun.getUrl("courseList", {}, {}));
  },
  getMoreDataAll() {
    if (this.courseUnList.slice(this.per_page * this.arrIndex).length > 0) {
      this.datas.list = this.datas.list.concat(this.courseUnList.slice(this.per_page * this.arrIndex, this.per_page * (this.arrIndex + 1))); //数组拼接
      this.arrIndex = this.arrIndex + 1;
      if(this.courseUnList.length === this.datas.list.length) {
        this.isLoadMoreSet = false;
      }
    }
  },
  // 获取更多数据
  getMoreData() {
      this.isLoadMore = false;
      if (this.page >= this.total_page) {
        return;
      } else {
        this.page = this.page + 1;
        $http
          .get(
            "home-page.get-decorate-page",
            {
              page: this.page,
              decorate_id: this.page_id || this.$store.state.temp.item.id,
              component_info: JSON.stringify({ list_key: this.tabIndex }),
              component_id: this.id,
              component_key: 'U_courseSupply'
            },'loading')
          .then((response)=> {
            this.isLoadMore = true;
            if (response.result === 1) {
              let res = response.data;
              this.datas.list.data =this.datas.list.data.concat(response.data.data);//数组拼接
              this.total_page = res.last_page;
              if(this.page >= this.total_page) {
                this.isLoadMore = false;
              }
              if(this.datas.get_style == "1") {
                if(this.datas.list.data.length > this.datas.get_number) {
                  this.datas.list.data.splice(this.datas.get_number, this.datas.list.data.length-this.datas.get_number);
                  this.isLoadMore = false;
                }
              }
              
            } else {
              this.page = this.page - 1;
              this.isLoadMore = false;
            }
          },
          function(response) {
            console.error(response);
            // error callback
          }
          );
      }
  },
},
//生命周期 - 创建完成（可以访问当前this实例）
created() {

},
//生命周期 - 挂载完成（可以访问DOM元素）
mounted() {
  if(this.datas?.list?.data) {
    this.total_page = this.datas.list.last_page;
    if(this.total_page <= this.page) {
      this.isLoadMore = false;
    }
    if(this.datas.list.data.length > this.datas.get_number) {
      this.datas.list.data.splice(this.datas.get_number,this.datas.list.data.length-this.datas.get_number);
      this.isLoadMore = false;
    }
    
  }else {
    if(this.datas.list.length <= 0) {
      this.isLoadMore = false;
    }
  }
    if(this.datas.get_style == "2") {
      this.courseUnList = this.datas.list;
      this.datas.list = this.datas.list.slice(0, 5);
      this.isLoadMore = false;
      this.isLoadMoreSet = true;
    }
},
beforeCreate() {}, //生命周期 - 创建之前
beforeMount() {}, //生命周期 - 挂载之前
beforeUpdate() {}, //生命周期 - 更新之前
updated() {}, //生命周期 - 更新之后
beforeDestroy() {}, //生命周期 - 销毁之前
destroyed() {}, //生命周期 - 销毁完成
activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
}
</script>
<style scoped>
.loadMore {
  width: 100%;
  height: 50px;
  cursor: pointer;
  line-height: 50px;
  text-align: center;
  clear: both;
}

.courseList ::v-deep .courseItem {
  margin: 0 0.625rem 0.75rem 0.625rem;
}

.courseList {
  padding: 0 0 0.125rem 0;
}

.courseList .title {
  padding: 0.625rem;
}

.title h3 {
  font-size: 1rem;
  font-weight: bold;
  line-height: 1.4375rem;
}

.title .courseAll {
  font-size: 0.75rem;
  line-height: 1.0625rem;
  color: #999;
}

/* @import url(); 引入公共css类 */

</style>
<style lang="scss" scoped>
  .chapter {
    margin-top: 0.3125rem;
    background: rgba(75, 106, 167, 0.39);
    border-radius: 0.125rem;
    padding: 0.1875rem 0;

    .chapter-left {
      padding: 0 0 0 0.625rem;

      img {
        width: 1.25rem;
        height: 1.25rem;
        background: #fff;
        border-radius: 50%;
      }

      span {
        font-size: 0.875rem;
        font-weight: bold;
        color: #516ea9;
        line-height: 1.0625rem;
        padding-left: 0.375rem;
      }
    }

    .chapter-right {
      font-size: 0.8125rem;
      font-weight: 500;
      color: #516ea9;
      line-height: 1.0625rem;
      padding-right: 0.8125rem;
    }
  }
</style>